<template>
  <div class="rsrj-wdrj-page">
    <el-card>
      <div slot="header">我的日记</div>
      <el-table :data="pagedData" border stripe style="width: 100%" @row-dblclick="handlePreview">
        <el-table-column prop="title" label="标题" width="200" />
        <el-table-column prop="date" label="日期" width="140" />
        <el-table-column prop="summary" label="摘要" />
      </el-table>
      <div style="margin-top: 12px; text-align: right;">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="filteredData.length"
          :page-size="pageSize"
          :current-page.sync="currentPage"
        />
      </div>
      <el-dialog title="日记预览" :visible.sync="previewVisible" width="600px">
        <div v-html="previewContent"></div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="previewVisible = false">关闭</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'RsrjWdrjView',
  data() {
    return {
      tableData: [
        { title: '第一篇日记', date: '2024-06-01', summary: '今天很开心，做了很多事...', content: '<p>今天很开心，做了很多事...</p>' },
        { title: '第二篇日记', date: '2024-06-02', summary: '遇到了一些挑战...', content: '<p>遇到了一些挑战...</p>' },
        { title: '第三篇日记', date: '2024-06-03', summary: '收获了新朋友...', content: '<p>收获了新朋友...</p>' },
      ],
      currentPage: 1,
      pageSize: 5,
      previewVisible: false,
      previewContent: '',
    }
  },
  computed: {
    filteredData() {
      return this.tableData;
    },
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredData.slice(start, start + this.pageSize);
    }
  },
  methods: {
    handlePreview(row) {
      this.previewContent = row.content;
      this.previewVisible = true;
    }
  }
}
</script>
<style scoped>
.rsrj-wdrj-page .el-card { box-shadow: 0 2px 6px rgba(74,158,255,0.04) !important; }
</style> 